<template>
  <div class="app-container home">
    <el-row>
      <span style="padding: 0;" class="font26">Home</span>
      <!--    主页内容中那四个框-->
      <PanelGroup  :data="tabs"></PanelGroup>
    </el-row>
    <el-row :gutter="10" class="right-box minhight">
      <!--      主体内容中 左下角的 可切换标签  tabs 为 标签内容  TabPaneLab 为自定义的 -->

      <el-col :xs="24" :md="18">
        <!--        条形图-->
        <div >
          <el-card class="box-card mt16" style="height: 100%;">
            <el-row class="lin-left-title">
              <el-col :span="12">
                <el-row><span class="activity-statistics  font18">活动统计</span></el-row>
                <el-row class="mt13"><span class="activity  font15" style="color: #A3A0FB;">单位：场</span></el-row>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <button class="line-title" style="background-color:#A3A1FB;color: #F1C40F ;"></button>
                <span class="line-title_text">待发布活动</span>
                <button class="line-title" style="background-color:#54D8FF;color: #656565 ;"></button>
                <span class="line-title_text">正在进行中</span>
                <el-select v-model="value" class="select_data" placeholder="请选择" size="mini">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <!--          折线图  图内容  lineChartData 图表数据 -->
            <div  class="hit320">
              <line-chart :chart-data="lineChartData"/>
            </div>
          </el-card>
        </div>

      </el-col>

      <el-col :xs="24" :md="6">

        <div style="height: 100%;">

          <!--饼状图-->
          <el-card class="box-card mt16">
            <el-row class="pie-right-title">
              <el-col :span="24">
                <el-row><span class="activity-statistics  font18">财务</span></el-row>
                <el-row class="mt13"><span class="activity  font15">总收入</span>
                  <span class="font15s"
                        style="float: right;color: #4AD991;font-weight: 700">{{formatter(12345600)}} 元</span>
                </el-row>
              </el-col>

            </el-row>
            <!--          折线图  图内容  lineChartData 图表数据 -->

            <el-divider></el-divider>
            <div class="hit320">
              <PieChart></PieChart>
              <div class="h40">
                <span class="weishouru  left lin25 text-center mt5 mr10"> </span>
                <div class="left" style="display: inline-block"><span class="  lin25">未收入</span>
                  <br>
                  <span class="money font13">51，000元</span>
                </div>
                <div style="display: inline-block" class="right ">
                  <span>已收入</span>
                  <br>
                  <span class="money font13">51，000元</span></div>
                <div class="yishouru  right  mt5 mr10"></div>
              </div>


              <el-divider></el-divider>
              <div class="div-center">   <el-button type="text" class="font13">查看详情</el-button></div>
            </div>


          </el-card>
        </div>

      </el-col>

    </el-row>

    <el-col :xs="24" :md="24">
      <TabPaneLab :data="tabs"></TabPaneLab>
    </el-col>
  </div>
</template>

<script>
  import TabPaneLab from "@/components/TabPaneLab/TabPaneLab";

  const lineChartData = {
    newVisitis: {
      actualData: [15, 11, 15, 17, 15, 24],
      expectedData: [18, 9, 16, 12, 16, 10]
    }
  }
  import PanelGroup from '../../dashboard/PanelGroup'
  import LineChart from '../../dashboard/LineChart'
  import PieChart from '../../dashboard/PieChart'


  export default {
    components: {
      TabPaneLab,
      LineChart,
      PieChart,
      PanelGroup
    },
    name: "index",
    data() {
      return {
        // 版本号
        version: "",
        activeName: 'first',
        tabs: [{
          label: "待发布",
          name: "first",
          color: "#A3A1FB",
          data: 10
        }, {
          label: "报名中",
          name: "second",
          data: 1,
          color: "#FF6565"
        }, {
          label: "进行中",
          name: "third",
          color: "#5EE2A0",
          data: 5
        }, {
          label: "已完成",
          name: "fourth",
          color: "#43425D",
          data: 3
        }

        ],


        lineChartData: lineChartData.newVisitis,
        options: [{
          value: '1',
          label: '年数据'
        }, {
          value: '2',
          label: '月数据'
        }, {
          value: '3',
          label: '季数据'
        }, {
          value: '4',
          label: '周数据'
        }],
        value: '1'
      };
    },
    methods: {
      formatter(value) {

        if (value == null || value == "undefined" || value == "") {
          return 0
        }
        var str = "";


        value = String(value)

        console.log(value.length)
        var count = 1;
        for (let i = 0; i < value.length; i++, count++) {
          if (count == 3) {
            str += ",";
            count = 0;
          }
          str += value.charAt(i);
        }
        return str
      }
    }
    ,

  }
  ;
</script>


<style>

  .hit320 {
    height: 320px;
  }

  .money {
    opacity: 0.5;
  }

  .box-card .el-divider--horizontal {

    margin: 20px 0 0 0;
  }

  .minhight {
    min-height: 420px
  }

  .tabs-chart {
    color: #000000;
    cursor: pointer;

  }

  .tabs-chart .el-tab-pane {
    height: 95%;


  }

  .tabs-chart .el-tabs__content {
    height: 100%;

  }

  .tabs-chart .el-tabs__active-bar {
    background-color: #000000;
    font-size: 15px;
    visibility: hidden;
  }

  .tabs-chart .el-tabs__item.is-active {
    color: #000000;
    visibility: hidden;
  }


  .tabs-chart .el-tabs__nav-wrap::after {
    visibility: hidden;
  }
</style>
<style>
  .box-card .el-select .el-input .el-select__caret {
    font-size: 7px;

  }

  .box-card .el-input--mini .el-input__inner {
    font-size: 7px;
  }
</style>

<style scoped lang="scss">


  .div-center{
    display: flex;
    justify-content: center;
 margin-top: 20px;
  }
  .weishouru {

    width: 10px;
    height: 10px;
    background: #EDECFE;
    border-radius: 50%;
  }

  .yishouru {
    width: 10px;
    height: 10px;
    background: #A4A1FB;
    border-radius: 50%;
  }

  .pie-right-title {
    height: 60px;
    padding-top: 22px;
  }
  .lin-left-title {
    height: 80px;
    padding-top: 22px;
  }

  .tabs-chart {
    height: 439px
  }

  .app-container {
    padding-top: 0;
    height: 100%;
  }

  .icon_right {
  }

  .line-title_text {
    font-size: 8px;
    line-height: 12px;
    margin-left: 3px
  }

  .line-title {
    border: hidden;
    border-radius: 8px;
    padding: 0;
    width: 18px;
    height: 8px;
    margin-left: 14px;
    margin-bottom: 3px
  }

  .home {
    background-color: #F5F3F7;
    padding: 20px;
  }

  .box-card {
    min-height: 300px;
  }

  .box-card-left h2 {
    font-size: 22px;
  }

  .activity {
    margin-left: 8%;
    height: 19px;
    font-size: 14px;
    font-family: Source Sans Pro;
    font-weight: bold;
    line-height: 19px;

  }

  .activity-statistics {
    margin-left: 8%;
    margin-top: 24px;
    font-family: Source Sans Pro;
    color: #4D4F5C;
    line-height: 9px;
  }

  .select_data {
    float: right;
    margin-right: 8%;
    width: 30%;
    height: 5%;
    font-size: 8px;
    border-radius: 4px;
  }

  .tabs_left {
  }


  @media (max-width: 1500px) and (min-width: 900px) {

    .left-padd {
      padding-top: 4%;
    }
  }


</style>
